import React, { useState } from 'react';
import { Layout, Button, Space, Avatar, Dropdown, Menu, message } from 'antd';
import { UserOutlined, LogoutOutlined, PlusOutlined } from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';
import { useAuth } from '../context/AuthContext';
import ThemeToggle from './ThemeToggle';

/**
 * 共用的顶部导航栏组件
 * @param {Object} props - 组件属性
 * @param {boolean} props.darkMode - 是否为暗黑模式
 * @param {Function} props.setDarkMode - 设置暗黑模式的函数
 * @param {Function} props.onNewProject - 新建项目按钮点击事件
 */
const Header = ({ darkMode, setDarkMode, onNewProject }) => {
  const { user, logout } = useAuth();
  const navigate = useNavigate();

  // 处理导航到任务管理页面
  const handleTaskManagement = () => {
    navigate('/task-management');
  };

  // 处理导航到首页
  const handleHome = () => {
    navigate('/');
  };

  // 处理导航到简历模式
  const handleResumeMode = () => {
    message.info('简历模式功能开发中');
  };

  // 处理退出登录
  const handleLogout = () => {
    logout();
    navigate('/login');
  };

  // 处理显示个人中心
  const showProfile = () => {
    message.info('个人中心功能开发中');
  };

  // 用户下拉菜单
  const userMenu = (
    <Menu>
      <Menu.Item key="profile" onClick={showProfile} icon={<UserOutlined />}>
        个人中心
      </Menu.Item>
      <Menu.Item key="logout" onClick={handleLogout} icon={<LogoutOutlined />}>
        退出登录
      </Menu.Item>
    </Menu>
  );

  return (
    <Layout.Header style={{
      position: 'fixed',
      zIndex: 1,
      width: '100%',
      background: darkMode ? 'var(--dark-card-bg)' : '#fff',
      display: 'flex',
      justifyContent: 'space-between',
      padding: '0 24px'
    }}>
      <div className="logo" onClick={handleHome} style={{ cursor: 'pointer' }}>项目管理系统</div>
      <div style={{ margin: '0 130px 0 0' }}>
        <Space size="middle" style={{ height: '64px', alignItems: 'center' }}>
          <Button type="text" onClick={handleResumeMode}>简历模式</Button>
          <Button type="text" onClick={handleTaskManagement}>任务管理</Button>
          
          {user && (
            <Dropdown overlay={userMenu} placement="bottomRight">
              <div style={{ display: 'flex', alignItems: 'center', cursor: 'pointer' }}>
                <span style={{ marginRight: '8px' }}>{user.userName}</span>
                <Avatar 
                  src={user.headerPhoto} 
                  icon={!user.headerPhoto && <UserOutlined />} 
                />
              </div>
            </Dropdown>
          )}
          
          <ThemeToggle darkMode={darkMode} setDarkMode={setDarkMode} />
        </Space>
      </div>
    </Layout.Header>
  );
};

export default Header;
